<template>
  <div id="datalistWindowContent">
    <div id="output" @click="output"></div>
    <div id="table">
      <el-table
        :fit="true"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="light"
        style="width: 798px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="47"
          align="center"
        ></el-table-column>

        <el-table-column label="序号" width="65px" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="简图" width="60" align="center">
          <template slot-scope="scope">
            <img
              align="middle"
              v-if="scope.row.sensorid == 'AIUS' || 'DPC' || 'EMI' || 'GMI'"
              style="height: 50px"
              :src="
                'http://36.112.130.153:7777/images/' +
                scope.row.browsefilelocation
              "
            />
            <img
              v-else
              style="height: 50px"
              :src="
                'http://36.112.130.153:7777/imageApi/' +
                scope.row.thumbfilelocation
              "
            />
            <!-- http://36.112.130.153:7777/imageApi/BROWSE/GF7/DLC/LEVEL1A/2021/04/17/378856/GF7-DLC-LEVEL1A-378856-browse.jpg -->
          </template>
        </el-table-column>

        <el-table-column
          prop="satelliteid"
          label="卫星"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sensorid"
          label="载荷"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="scenetime"
          label="采集时间"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cloudpercent"
          label="云量(%)"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sceneid"
          label="景序列号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="productid"
          label="产品序列号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          width="137"
          label="操作"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import fs from "fs";
import { ipcRenderer } from "electron";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      ipcRenderer.send("loadImg", this.multipleSelection);
    },
    output() {
      let str =
        "satellite,sensor,scenetime,cloudpercent,sceneid,productid,north_west,north_east,south_east,south_west,dataarchivedir\n";
      this.multipleSelection.map((e) => {
        let dataarchivedir = e.dataarchivedir.split("/")[
          e.dataarchivedir.split("/").length - 1
        ];
        let wkt = e.geom;
        let wkt_list = wkt
          .replaceAll("POLYGON((", "")
          .replaceAll("))", "")
          .split(",");
        let north_west = wkt_list[0];
        let north_east = wkt_list[1];
        let south_east = wkt_list[2];
        let south_west = wkt_list[0];

        str =
          str +
          e.satelliteid +
          "," +
          e.sensorid +
          "," +
          "A.D." +
          e.scenetime +
          "," +
          e.cloudpercent.toString() +
          "," +
          e.sceneid.toString() +
          "," +
          e.productid.toString() +
          "," +
          north_west +
          "," +
          north_east +
          "," +
          south_east +
          "," +
          south_west +
          "," +
          dataarchivedir +
          "\n";
      });

      let path = window.localStorage.getItem("output_path");
      let format = window.localStorage.getItem("output_format");

      if (format == "1") {
        fs.writeFileSync(path + "/satellite_data.txt", str, "utf8");
      } else if (format == "2") {
        fs.writeFileSync(path + "/satellite_data.csv", str, "utf8");
      }

      this.$message({
        message: "导出成功",
        type: "success",
      });
    },
  },
  mounted() {
    ipcRenderer.on("snedResult", (e, msg) => {
      this.tableData = msg;
    });
  },
};
</script>

<style lang="scss" scoped>
#datalistWindowContent {
  height: 567px;
  width: 798px;
  background-color: #2b2b2b;
  border-left: 1px solid #222225;
  border-right: 1px solid #222225;
  border-bottom: 1px solid #222225;
  #table {
    height: 567px;
    width: 790px;
    overflow-y: scroll;
    margin-left: 8px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0);
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      cursor: pointer;
    }

    &::-webkit-scrollbar-button {
      height: 0;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  #output {
    position: fixed;
    bottom: 50px;
    right: 50px;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    z-index: 99;
    background-color: #2b2b2b;
    background-image: url("../../assets/output-hover.svg");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 1px solid #9c1a1a;
  }
  #output:hover {
    background-color: #9c1a1a;
    border: 1px solid #7e7e7e;
    background-image: url("../../assets/output.svg");
  }
}

#datalistWindowContent /deep/.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}

#datalistWindowContent /deep/ .el-table {
  color: #7e7e7e;
  text-align: center;
  background-color: #2b2b2b;
}

#datalistWindowContent
  /deep/.el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td {
  /*表格选中颜色*/
  background-color: #9c1a1a;
}

#datalistWindowContent /deep/.el-table th > .cell {
  /*表头样式*/
  text-align: center;
  color: #9c1a1a;
}

#datalistWindowContent /deep/.el-table th {
  background-color: #2b2b2b;
}

#datalistWindowContent /deep/.el-table tr {
  background-color: #2b2b2b;
}

#datalistWindowContent /deep/ .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #9c1a1a !important;
}

#datalistWindowContent /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #9c1a1a;
  border-color: #9c1a1a;
}

#datalistWindowContent /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #9c1a1a;
  border-color: #9c1a1a;
}

#datalistWindowContent /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #9c1a1a;
}
</style>
